.main-content {
  opacity: 0;
  position: relative;
  box-sizing: border-box;
  padding: 0.8rem 0 0 1.5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: fade-in 0.8s ease 0.5s forwards;
  background-image: url("../images/page3/bg.png");
}
.title {
  opacity: 0;
  width: 18.5rem;
  margin-top: 0.5rem;
  margin-left: 0.7rem;
  margin-bottom: 0.8rem;
  animation: fly-in-left 0.8s ease 0.8s forwards;
  img {
    width: 17.11rem;
  }
}
.content {
  //opacity: 0;
  top: 4rem;
  //bottom: 0rem;
  width: 19.09rem;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15.9rem auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //animation: fade-in 0.8s ease 1s forwards;
  & .txt {
    left: 50%;
    bottom: 0rem;
    width: 18.5rem;
    position: absolute;
    transform: translateX(-50%) translateY(110%);
    img {
      opacity: 0;
      width: 18.52rem;
      animation: fade-in 0.8s ease 1.6s forwards;
    }
  }
  & .desc {
    left: 50%;
    bottom: -1.3rem;
    width: 18.5rem;
    position: absolute;
    transform: translateX(-50%) translateY(100%);
    img {
      opacity: 0;
      width: 13.30rem;
      animation: fade-in 0.8s ease 2.1s forwards;
    }
  }
  .button {
    width: 10.50rem;
    &:nth-child(1) {
      opacity: 0;
      width: 17.665rem;
      animation: fade-in 0.8s ease 1s forwards;
    }
    &:nth-child(2) {
      left: 0;
      opacity: 0;
      bottom: 1.4rem;
      width: 5.51rem;
      position: absolute;
      animation: fly-in-left 0.8s ease 1.3s forwards;
    }
    &:nth-child(3) {
      right: 0;
      opacity: 0;
      bottom: 1.4rem;
      width: 6.25rem;
      position: absolute;
      animation: fly-in-left 0.8s ease 1.4s forwards;
    }
    &:nth-child(4) {
      opacity: 0;
      width: 18.425rem;
      margin-top: 0.3rem;
      animation: fly-in-left 0.8s ease 1.2s forwards;
    }
  }
}
